<template>
  <div class="">

    <ELTable v-bind="configTable">

      <!-- 搜索 -->
      <template #search="{ searchSubmit, params }">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input v-model="params.key" placeholder="请输入关键字" />
            </el-form-item>
            <el-form-item label="类型" prop="type" style="width: 200px;">
              <el-select v-model="params.type" placeholder="请选择类型">
                <el-option v-for="(item, index) in newstype" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="searchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <template #state="{ scope }">
        <div>
          <el-switch size="large" @change="(e: any) => changeState(e, scope.row)" :active-value="1" :inactive-value="0"
            v-model="scope.row.state" />
        </div>
      </template>

      <template #title="{ scope }">
        <div style="color: skyblue;" @click="inner(scope.row)">
          {{ scope.row.title }}
        </div>
      </template>
      
      <template #buttons="{ deleteAllHandle }">
        <div>
          <el-button type="primary" @click="router.push('/newsAdd?id=' + 0)">添加</el-button>
          <el-button type="danger" @click="deleteAllHandle">删除</el-button>
        </div>
      </template>
      <template #operate="{ scope, delrow }">
        <div>
          <el-button type="primary" @click="changeData(scope.row.id)">修改</el-button>
          <el-button type="danger" @click="delrow(scope.row.id)">删除</el-button>
        </div>
      </template>
    </ELTable>
    <NewsInner v-if="dialogVisibles" :inner="scope" @close="houseClose"></NewsInner>
  </div>
</template>

<script lang='ts' setup>
import { ref, watch, reactive, onMounted } from "vue"
import ELTable, { TableType } from "../../components/ELTable.vue";
import { newstypelist, getnews, newsadd, newsdelete, newsdeleteall, newsonelist } from "../../service/news/news";
import { column } from './news'
import { useRouter } from "vue-router";
import NewsInner from "../../components/NewsInner.vue";
const dialogVisibles = ref(false)
const configTable: TableType = reactive({
  column: column,
  isSelection: true,
  loadData: getnews,
  delDate: newsdelete,
  delallDate: newsdeleteall,
  searchParams: {
    state: 0
  }
})
const scope = ref({})

const inner = (val: object) => {
  dialogVisibles.value = true
  scope.value = val
}
const houseClose = () => {
  dialogVisibles.value = false
}

// 引入路由
const router = useRouter()
const changeData = (id: number) => {
  router.push('/newsAdd?id=' + id)
}


const changeState = async (val: any, scope: any) => {
  let resadd = await newsonelist(scope.id)
  let res = await newsadd(resadd.data)
}

const newstype = ref<any>([])
onMounted( () => {
  newstypelist().then(res=>{
    newstype.value = res.data.list
  })
})
</script>

<style scoped></style>